<script>
import { Search, Sales } from "@/api/link.js"
export default {
    data() {
        return {
            inputa: '',
            inputb: '',
            inputc: '',
            value1: '',
            current: 1,
            size: 5,
            options: [{
                value: '支付宝',

            }, {
                value: '微信',

            }, {
                value: '银行卡',

            },

            ],
            value: '',

        }
    },
    methods: {
        //查询
        inquire() {
            // console.log(this.inputa);
            // console.log(this.inputb);
            // console.log(this.value1);
            // console.log(this.inputc);
            // console.log(this.value);
            if (this.inputa != '' && this.inputb != '' && this.inputc != '') {
                Search(this.inputa / 1, this.inputb, this.inputc / 1).then((res) => {
                    console.log(res.data.records);
                    this.$store.commit("UPTEXTA", res.data.records)
                })
            }


        },


        //重置
        reset() {

            this.inputa = '',
                this.inputb = '',
                this.value1 = "",
                this.inputc = "",
                this.value = "",
                Sales(this.current, this.size).then((res) => {
                    // console.log(res.data.data.records);
                    // this.UPTEXTA(res.data.data.records)
                    this.$store.commit("UPTEXTA", res.data.records)
                })
        }
    },

}
</script>

<template>
    <div class="box">
        <!-- 左边区域 -->
        <div class="left">
            <div class="zuo">
                <!-- 编码区域 -->
                <div class="small">
                    <div class="sname">
                        商品页码
                    </div>
                    <div class="frame">
                        <el-input placeholder="" v-model="inputa" clearable>
                        </el-input>
                    </div>
                </div>
                <!-- 商品名称区域 -->
                <div class="small">
                    <div class="sname">
                        商品名称
                    </div>
                    <div class="frame">
                        <el-input placeholder="" v-model="inputb" clearable>
                        </el-input>
                    </div>
                </div>
                <!-- 下单时间区域 -->
                <div class="small">
                    <div class="sname">
                        下单时间
                    </div>
                    <div class="frame">
                        <div class="block">

                            <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </div>

                    </div>
                </div>
                <!-- 订单编号区域 -->
                <div class="small">
                    <div class="sname">
                        每页数据
                    </div>
                    <div class="frame">
                        <el-input placeholder="" v-model="inputc" clearable>
                        </el-input>
                    </div>
                </div>
                <!-- 支付方式区域 -->
                <div class="small">
                    <div class="sname">
                        支付方式
                    </div>
                    <div class="frame">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>

            </div>
            <div class="you">
                <el-button type="primary" @click="inquire()">查询</el-button>
                <el-button type="primary" @click="reset()">重置</el-button>
            </div>
        </div>
        <!-- 右边区域 -->
        <div class="right">

        </div>
    </div>
</template>


<style scoped lang="scss">
.box {
    width: 100%;
    height: 120px;
    margin-top: 10px;

    display: flex;

    // 左边区域
    .left {
        width: 90%;
        height: 100%;

        display: flex;

        // 左边区域左盒子
        .zuo {
            width: 75%;
            height: 100%;
            display: flex;
            flex-wrap: wrap;


            .small {
                width: 33.33%;
                height: 50%;
                display: flex;
                flex-shrink: 0;
                font-size: 12px;


                // 名称区域
                .sname {
                    width: 40%;
                    height: 40px;

                    text-align: center;
                    line-height: 40px;
                }

                .frame {
                    width: 60%;
                    height: 30px;

                    .el-date-editor {
                        width: 135px;
                    }

                }


            }
        }

        // 右边区域右盒子
        .you {
            width: 25%;
            height: 100%;


            .el-button {
                margin-left: 40px;
            }
        }
    }

    // 右边区域
    .rigth {
        width: 10%;
        height: 100%;
        background-color: darkgoldenrod;
    }
}
</style>